<template>
  <div class="generic-table-container">
    <el-card shadow="never">
      <!-- 表格 -->
      <el-table
        :data="tableData"
        stripe
        border
        :height="tableHeight"
        @selection-change="handleSelectionChange">
        <!-- 动态生成表格列 -->
        <el-table-column
          v-if="showSelection"
          type="selection"
          width="55">
        </el-table-column>
        
        <el-table-column
          v-if="showIndex"
          type="index"
          width="50"
          label="序号">
        </el-table-column>
        
        <el-table-column
          v-for="column in columns"
          :key="column.prop"
          :prop="column.prop"
          :label="column.label"
          :width="column.width || 'auto'"
          :sortable="column.sortable"
          :formatter="column.formatter">
        </el-table-column>
        
        <!-- 操作列 -->
        <el-table-column
          v-if="showActions"
          label="操作"
          width="180">
          <template slot-scope="scope">
            <el-button
              v-for="action in actions"
              :key="action.name"
              :type="action.type || 'text'"
              :size="action.size || 'small'"
              @click="handleAction(action.name, scope.row)">{{ action.text }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <!-- 分页 -->
      <div class="pagination" v-if="showPagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'GenericTable',
  props: {
    // 表格数据
    tableData: {
      type: Array,
      default: () => []
    },
    // 表格列配置
    columns: {
      type: Array,
      required: true
    },
    // 总记录数
    total: {
      type: Number,
      default: 0
    },
    // 当前页码
    currentPage: {
      type: Number,
      default: 1
    },
    // 每页显示数量
    pageSize: {
      type: Number,
      default: 10
    },
    // 是否显示选择框
    showSelection: {
      type: Boolean,
      default: false
    },
    // 是否显示序号
    showIndex: {
      type: Boolean,
      default: true
    },
    // 是否显示分页
    showPagination: {
      type: Boolean,
      default: true
    },
    // 是否显示操作列
    showActions: {
      type: Boolean,
      default: false
    },
    // 操作按钮配置
    actions: {
      type: Array,
      default: () => []
    },
    // 表格高度
    tableHeight: {
      type: [String, Number],
      default: 'auto'
    }
  },
  data() {
    return {
      multipleSelection: []
    }
  },
  methods: {
    // 选择项变化
    handleSelectionChange(selection) {
      this.multipleSelection = selection;
      this.$emit('selection-change', selection);
    },
    // 每页数量变化
    handleSizeChange(newSize) {
      this.$emit('size-change', newSize);
    },
    // 当前页码变化
    handleCurrentChange(newPage) {
      this.$emit('current-change', newPage);
    },
    // 操作按钮点击
    handleAction(actionName, row) {
      this.$emit('action', actionName, row);
    }
  }
}
</script>

<style scoped>
.generic-table-container {
  padding: 15px;
}

.pagination {
  padding: 15px;
  text-align: right;
}
</style>